<template>
    <div class="sta-body">


        <FullHeadImg backImage="global/global_stable_bg.png">
            <template #default>
                <h1>
                    Accept Stablecoin Payments and <br>Unlock Global Expansion
                </h1>
            </template>
        </FullHeadImg>

        <section class="sta-section1 body-m">
            <div class="section1-left">
                <p>In the digital economy, businesses operate around the clock and across multiple time zones. Yet,
                    traditional financial systems are still bound by rigid, region-specific schedules that can slow down
                    transactions and limit growth.
                </p>
                <p>Stablecoins — crypto tokens pegged to fiat currencies like the USD or EUR — are driving a shift in
                    how money moves. By enabling instant, 24/7 transactions with the stability of traditional
                    currencies, stablecoins make cross-border payments faster and more efficient than ever before.
                </p>
            </div>

            <img :src="getImage('global/global_stable_card1.png')" alt="">
            <!-- <VideoView class="sta-video" :src="getImage('global/Stablecoin checkout video.mp4')" /> -->
        </section>

        <section class="sta-cards body-m">
            <div class="sta-card gradient-card" v-for="(item, idx) in cardsDatas" :key="idx">
                <!-- <img :src="getImage(item.img)" alt=""> -->
                <p class="sta-card-desc">{{ item.desc }}</p>
            </div>
        </section>

        <section class="sta-payment body-m">
            <h2>
                Accept stablecoin payments globally
            </h2>
            <p>
                Accelerate your global expansion, reduce cross-border friction, and tap into new audiences by enabling
                stablecoin payments for your customers. Through a direct integration with your existing checkout, you
                can take payments globally and have them settle in fiat to your own named account or to a third-party
                bank account.
            </p>
            <div class="sta-payment-cards">
                <div class="payment-card gradient-card" v-for="(item, idx) in stablecoinPaymentDatas" :key="idx">
                    <img :src="getImage(item.img)" alt="">
                    <div>
                        <p>{{ item.desc }}</p>
                        <div class="sta-card-imgs" v-if="item.imgs">
                            <img class="card-img" v-for="(img, index) in item.imgs" :key="index" :src="getImage(img)"
                                alt="">
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="sta-compare body-m">
            <h2>
                Honeybee solution
            </h2>
            <div class="sta-compare-content">
                <div class="sta-compare-card">
                    <h3>
                        Legacy problem
                    </h3>
                    <p>
                        It often takes businesses significant time and effort to onboard new partners that allow them to
                        receive and hold fiat settlements in new markets.
                    </p>
                    <p>The fiat world is constrained by banking hours and complexities of correspondent banking
                        system,
                        creating bottlenecks and friction for businesses looking to settle funds fast.
                    </p>
                </div>
                <div class="compare-middle">
                    <img :src="getImage('global/arrow.png')" alt="">
                    <!-- <img :src="getImage('global/arrow.png')" alt=""> -->
                </div>
                <div class="sta-compare-card honey-bee-card">
                    <h3>
                        Honeybee solution
                    </h3>
                    <p>
                        With our platform and Stablecoin settlement capabilities, we give businesses access to a global
                        infrastructure to support them as they scale.
                    </p>
                    <p>Stablecoins remove these points of friction and bottlenecks, allowing businesses to access
                        working capital fast with the near-instant settlement of fiat transactions in Stablecoin, rather
                        than the need to wait multiple days.
                    </p>
                </div>
            </div>
        </section>

        <section class="sta-benefits body-m">
            <h2>
                Benefits of Honeybee Stablecoin Checkout
            </h2>
            <div class="benefits-cards">
                <div class="benefits-card" v-for="(item, index) in benefitsDatas" :key="index">
                    <h3>{{ item.title }}</h3>
                    <div class="benefits-card-desc">{{ item.desc }}</div>
                </div>
            </div>
            <ReadyGetStart />
        </section>
        <section></section>
    </div>
</template>

<script setup lang="ts" name="name">
import ReadyGetStart from '@/components/ReadyGetStart.vue';

const cardsDatas = [
    {
        img: 'global/stablecoin_cards_img1.png',
        desc: 'For businesses, the benefits are immediate. They can access funds instantly, removing the delays of traditional bank transfers and reinvesting in their growth without waiting. '
    },
    {
        img: 'global/stablecoin_cards_img2.png',
        desc: 'For international buyers, from New York to Berlin, products are delivered faster, without the wait for payment clearance. '
    }
]

const stablecoinPaymentDatas = [
    {
        img: 'global/sta-pay-img1.png',
        desc: 'Accept payments in Stablecoin on popular blockchains',
        imgs: ['global/coin_eth.png', 'global/coin_tron.png', 'global/coin_polygon.png',]
    },
    {
        img: 'global/sta-pay-img2.png',
        desc: 'Eliminate cross-border payment delays and disputes'
    },
    {
        img: 'global/sta-pay-img3.png',
        desc: 'Conver to fiat - to your own named account or to a third-party bank account'
    }
]

const benefitsDatas = [
    {
        title: 'One-Stop Fiat Off-Ramps',
        desc: 'To your own named bank account or to a third-party bank account'
    },
    {
        title: 'Enhanced Transaction Certainty and Security',
        desc: 'Blockchain-based payments provide transparency and traceability, with embedded KYT technology and transaction monitoring'
    },
    {
        title: 'Doing business without borders',
        desc: 'Accept payments from anywhere in the world, eliminating cross-border transaction barriers'
    },
    {
        title: 'Do business with confidence',
        desc: 'Unlike traditional cryptocurrencies, Stablecoins are less volatile, providing businesses and customers with predictable transaction values'
    },
]

</script>

<style scoped lang="scss">
.sta-body {
    display: flex;
    gap: 4rem;
    flex-direction: column;
}

.sta-title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: $primary-color;
}

.sta-section1 {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: space-between;

    .section1-left {
        width: 50%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    img {
        border-radius: 5px;
        width: 45%;
    }
}

.sta-cards {
    display: flex;
    gap: 2rem;
    justify-content: space-around;

    .sta-card {
        flex: 1;
    }
}

.sta-payment {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;

    p {
        text-align: center;
    }

    .sta-payment-cards {
        display: flex;
        gap: 2rem;
        justify-content: space-around;

        .payment-card {
            flex: 1;
            display: flex;
            align-items: start;
            gap: 1rem;
            padding: 1rem;

            p {
                text-align: left;
            }

            .sta-card-imgs {
                display: flex;
                gap: 10px;
                padding-top: 10px;

                .card-img {
                    height: 35px;
                }
            }
        }
    }
}

.sta-compare {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;

    .sta-compare-content {
        display: flex;
        gap: 2rem;
        justify-content: space-around;
        width: 100%;

        .sta-compare-card {
            background-color: #f8e279;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            padding: 2rem;
            border-radius: 5px;
        }

        .honey-bee-card {
            background-color: #F5D623;
        }
    }


    .compare-middle {
        display: flex;
        height: 200px;
        margin: auto 0;
        flex-direction: column;
        justify-content: space-around;

        img {
            width: 30px;
        }
    }

    .compare-title {
        font-size: 1.2rem;
        font-weight: 700;
    }
}

.sta-benefits {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;

    .benefits-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: $primary-color;
    }

    .benefits-cards {
        display: grid;
        gap: 2rem;
        grid-template-columns: repeat(2, 1fr);
        padding: 1rem 0;

        .benefits-card {
            background-color: #FAF4E8;
            padding: 2rem;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 1rem;

            h3 {
                font-size: 1.2rem;
            }
        }
    }
}

@media (max-width: 650px) {
    .sta-body {
        gap: 2rem;
    }

    .sta-section1 {
        flex-direction: column;

        .section1-left {
            width: 100%;
        }

        .sta-video {
            width: 90%;
        }
    }

    .sta-cards {
        flex-direction: column;
    }

    .sta-payment-cards {
        flex-direction: column;
        gap: 2rem;

        .payment-card {
            flex-direction: column;
            align-items: center;
            padding: 1rem 0;
        }
    }

    .sta-compare-content {
        flex-direction: column;
        align-items: center;
        gap: 0;

        .compare-middle {
            height: auto;
            transform: rotateZ(90deg);
        }
    }

    .sta-benefits {
        h2 {
            text-align: center;
        }

        .benefits-cards {
            grid-template-columns: repeat(1, 1fr);
        }
    }
}
</style>